<template>
 <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width" :draggable="props.draggable" :overflow="props.overflow" >
    <template #header>

    </template>
    <span>It's a draggable Dialog</span>
    <template #footer v-if="props.showBtn">
      <span class="dialog-footer">
        <el-button @click="Close">{{ props.CancelTxt }}</el-button>
        <el-button type="primary" @click="Close"
          >{{ props.ConfirmTxt }}</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { watchImmediate } from '@vueuse/core'
import { reactive,defineProps,ref,defineEmits, watch } from 'vue'

const state = reactive({

})
const emits = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)

const props = defineProps({
    modelValue: {
        type: Boolean,
        default:false
    },
    title: {
        type: String,
        default:""
    },
    width: {
        type: String,
        default:""
    },
    fullscreen: {
        type: String,
        default:""
    },
    top: {
        type: String,
        default:""
    },
    modal: {
        type: String,
        default:""
    },
    appendToBody: {
        type: String,
        default:""
    },
    customClass: {
        type: String,
        default:""
    },
    showClose: {
        type: String,
        default:""
    },
    beforeClose: {
        type: String,
        default:""
    },
    draggable: {
        type: String,
        default:""
    },
    center: {
        type: String,
        default:""
        
    },
    destroyOnClose: {
        type: String,
        default:""
        
    },
    showBtn: {
        type: Boolean,
        default:true
    },
    CancelTxt: {
        type: String,
        default:"取消"
    },
    ConfirmTxt: {
        type: String,
        default:"确定"
    }
    
})


watch(() => props.modelValue, (val) => {
    dialogVisible.value = val
    console.log('#', dialogVisible.value );
}, { immediate: true })

const Close = () => {
    emits('update:modelValue', false)
    console.log("1");
}

const Open = () => {
    emits('update:modelValue',true)
}
</script>

<style scoped lang='scss'>

</style>